<!--
 * @Author: wangding
 * @Date: 2020-11-12 12:11:22
 * @LastEditTime: 2020-12-25 17:30:43
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\device\indexHistory\indexHistory.vue
-->
<template>
    <div class="indexHistory-main-box">
        <div class="search-box">
            <div class="search-box-sub">
                <span class="lable-text">{{$t('devWifi.deviceSN')}}</span>
                <el-input v-big v-model="inverterSn" style="width:160px;" :placeholder="$t('pleaseInput')"></el-input>
            </div>
            <div class="search-box-sub">
                <el-button type="primary" @click='query'>{{$t('query')}}</el-button>
            </div>
        </div>
        <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe :column='column' :select='false'>
            <template #cmdValue="{data}">
                <a href="javascript:;" class="hover-a-link" style="color:#ED7523;" @click='showDetailModal(data.cmdValue)' :title='data.cmdValue'>{{data.cmdValue | stringLength(100)}}</a>
            </template>
        </baseTable>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
        <el-dialog
        :title="$t('index_details')"
        :visible.sync="dialogVisible"
        width="30%"
        >
        <div v-if='msgListData instanceof Array'>
            <p>[</p>
                <template v-for="(item,indexs) in msgListData" >
                    <div :key='indexs' style="margin-left:20px;">
                            <p>{</p>
                                <p style="margin-left:20px;" v-for='(value,key,index) in item' :key='index+key+indexs'>{{key}}:{{item[key]}},</p>
                            <p>},</p>
                    </div>
                </template>
            <p>]</p>
        </div>
        <div v-else>
            <p>{</p>
                <p style="margin-left:20px;" v-for='(value,key,index) in msgListData' :key='index'>{{key}}:{{msgListData[key]}},</p>
            <p>}</p>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">{{$t('cancel')}}</el-button>
            <el-button type="primary" @click="dialogVisible = false">{{$t('sure')}}</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
import baseTable from '../../../components/common/baseTable'
export default {
    components: {
        baseTable
    },
    props: {

    },
    data() {
        return {
            inverterSn:'',
            loading:false,
            dataRows:[],
            size:10,
            current:1,
            total:1,
            column:[{
                title: this.$t('device.inverter.SN'),
                value: 'inverterSn',
                width:'150'
            },
            {
                title: this.$t('mocha.indexHistory.cmdValue'),
                value: 'cmdValue',
                slot: 'cmdValue',
            },
            {
                title: this.$t('opttask.createTime'),
                value: 'createTime',
                slot: 'createTime',
                width:'150'
            }],
            dialogVisible:false,
            msgListData:''
        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.mochaGetDevCmdData()
    },
    methods: {
        showDetailModal(data){
            this.msgListData = JSON.parse(data)
            this.dialogVisible = true
        },
        async mochaGetDevCmdData(){
            this.loading = true
            let res = await this.API.mochaGetDevCmdData({
                inverterSn:this.inverterSn,
                size:this.size,
                current:this.current
            })
            this.loading = false
            this.total = res.total
            this.dataRows = res.rows
        },
        query(){
            this.current = 1
            this.mochaGetDevCmdData()
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.mochaGetDevCmdData()
        },
        handleCurrentChange(val) {
          this.current = val
          this.mochaGetDevCmdData()
        },
    },
};
</script>

<style  lang="less" scoped>
.indexHistory-main-box{
    .hover-a-link:hover{
        text-decoration: underline;
    }
}
</style>
